import React from 'react';
import { browserHistory, Link } from 'react-router';
import { Form, Icon, Input, Button, Checkbox, Spin, message, Row, Col } from 'antd';
const FormItem = Form.Item;
import * as actions from './../../actions/frontEnd/loginAction';

class NormalLoginForm extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
          loading: false
      }
  }
  componentDidMount(){
    window.onresize = function () {
      var marginTop = (document.body.clientHeight/2) - 167;
      if(marginTop >= 120){
        $(".divBackground").css("marginTop",marginTop + "px");
      }
    }
    window.onresize();
  }
  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent.');
    } else {
      callback();
    }
  }
  goBack (){
    browserHistory.push("login");
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        actions.signUp(this,{
            username: values.username,
            email: values.email,
            password: values.password
        });
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login">
        <div id="container" className="container">
          <div className="divBackground">
            <a href="/"><img src="/src/styles/images/frobalogo.png" className="imgFrobalogo"/></a>
            <div className="divQuality">
              <div className="divAuthentic"></div>
              <div className="divLighting"></div>
            </div>
            <div className="loginForm" >
                <Spin spinning={this.state.loading} tip="注册用户，请稍候...">
                  <div className="shadow_l"></div>
                  <div className="divHeader">
                      <img src="/src/styles/images/signUp.png" width="220"/>
                  </div>
                  <Form onSubmit={this.handleSubmit} className="login-form">
                    <FormItem>
                      {getFieldDecorator('username', {
                        rules: [{ required: true, message: '请输入 账号。' }],
                      })(
                        <Input addonBefore={<Icon type="user" size="large" style={{ fontSize: 14 }} />} placeholder="账号" size="large" />
                      )}
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('email', {
                        rules: [{
                          type: 'email', message: '电子邮箱 格式错误。',
                        }, {
                          required: true, message: '请输入 电子邮箱。',
                        }],
                      })(
                        <Input addonBefore={<Icon type="mail" size="large" style={{ fontSize: 14 }} />} placeholder="电子邮箱" size="large" />
                      )}
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: '请输入 密码。' }],
                      })(
                        <Input addonBefore={<Icon type="lock" style={{ fontSize: 14 }} />} type="password" placeholder="密码" size="large"/>
                      )}
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('confirmPassword', {
                        rules: [{
                          required: true, message: '请输入 确认密码。'
                        },{
                          validator: this.compareToFirstPassword,
                        }],
                      })(
                        <Input addonBefore={<Icon type="lock" style={{ fontSize: 14 }} />} type="password" placeholder="确认密码" size="large"/>
                      )}
                    </FormItem>
                    <FormItem>
                      <Row>
                        <Col span={24} style={{ textAlign: 'right', display: 'flex' }}>
                          <Button type="danger" className="login-back-button" onClick={this.goBack}>返 回</Button>
                          <Button type="primary" htmlType="submit" className="login-form-button">注册用户</Button>
                        </Col>
                      </Row>
                    </FormItem>
                  </Form>
                  <div className="shadow_r"></div>
                </Spin>
                <div className="divFooter">支持 IE10 及以上版本的浏览器。为了您更顺畅的使用体验，建议使用：谷歌 Chrome 浏览器</div>
            </div>
          </div>
        </div>

      </div>
    );
  }
}
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
export default WrappedNormalLoginForm;
